<!--
 * @FilePath: 优化代码2.html
 * @Author: 苏苏少年
 * @Date: 2022-11-19 21:58:08
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优化代码2</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: aqua;
            position: absolute;
            left: 10px;
            top: 100px;
            opacity: 1;
            /* ease：（逐渐变慢）默认值 */
            transition: all 1s ease;
        }

        /* 利用js 把这个类名加到这个div中*/
        .active {
            left: 500px;
            width: 200px;
            height: 200px;
            opacity: 0.5;
        }
    </style>
</head>

<body>
    <button id="start">开始动画</button>
    <div class="box">优化代码2</div>
    <!-- 第一种 -->
    <script>
        var start = document.getElementById("start");
        var box = document.querySelector(".box");
        // 就是说,一个属性要如果不断的切换, 往往就是定义一个变量!
        // 表示当前没有active属性 默认没有!
        var flag = false;
        // 函数节流锁 true 表示当前锁是打开的 (默认开启)
        var lock = true;

        var timer = null; // 锁打开状态; 不为null就为锁住状态!

        start.onclick = function(){
            if(timer) {
                return; // 如果锁是打开的 不操作
            } else{
                if (!flag) {
                    box.classList.add("active");
                    flag = true;
                } else {
                    box.classList.remove("active");
                    flag = false;
                }
            }

            // 计时器(等待开锁)
            timer = setTimeout(function () {
                timer = null;
            }, 1000);
        }

    </script>


</body>
</html>
